<template>
  <div class="header">
    <div class="wrap clearfix">
      <h1 class="logo">
        <a href="#" class="logo_img">
          网站名称
        </a>
      </h1>

      <div class="menu">
        <ul class="clearfix">
          <router-link tag="li" class="menu-item" to="/home">
            <span>Home</span>
          </router-link>

          <router-link tag="li" class="menu-item" to="/product">
            <span>Product</span>
          </router-link>


          <router-link tag="li" class="menu-item" to="/contact">
            <span>contact</span>
          </router-link>

          <router-link tag="li" class="menu-item" to="/about">
            <span>About</span>
          </router-link>

          <li class="underline"></li>
        </ul>
        <div class="l_and_r">
          <router-link tag="span" class="btn-min btn active" to="/login">
            登陆
          </router-link>

          <router-link tag="span" class="btn-min btn" to="/register">
            注册
          </router-link>
        </div>
      </div>

      <div class="menu-min">

      </div>
    </div>
    <div class="progress-wrap">
      <i-progress :percent="45" status="active" stroke-width="2" hide-info="true"></i-progress>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import $ from 'jquery'

  export default {
    data () {
      return {
        widthArr: [],
        ml: 0
      }
    },
    created () {
      this.init()
      this.bindMouse()
    },
    methods: {
      init () {
        let _this = this
        $(function () {
          let $menu = $('.header').find('.menu')
          let firstItemWidth = $menu.find('.menu-item').eq(0).find('span').width()
          _this.ml = parseInt($menu.find('.menu-item').eq(0).find('span').css('marginLeft'))
          _this.widthArr = (function () {
            let arr = []
            $menu.find('.menu-item').each(function (index, item) {
              arr.push($(item).width())
            })
            return arr
          })()
          $menu.find('.underline').width(firstItemWidth).css('left', _this.ml)
          // 绑定鼠标移动事件
        })
      },
      bindMouse () {
        let _this = this
        $(function () {
          let $Ul = $('.header').find('.menu').find('ul')
          let $underline = $Ul.find('.underline')
          $Ul.find('.menu-item').each(function (index, item) {
            $(item).bind('mouseenter', function () {
              $underline.animate({
                width: _this.widthArr[index] - (_this.ml * 2),
                left: _this.getPositionL(index)
              }).show()
            })

            $(item).bind('mouseleave', function () {
              $underline.animate().hide()
            })
          })
        })
      },
      getPositionL (index) {
        let s = 0
        for (let i = 0; i < index; i++) {
          s += this.widthArr[i]
        }
        return s + this.ml
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .header
    position: fixed
    left: 0
    top: 0
    z-index: 2
    wh(100%, 60px)
    background-color: $main-color
    .logo
      ltposition(0, 0)
      a
        float: left
        margin-top: 15px
        padding-left: 40px
        line-height: 34px
        background-image: url('./logo.png')
        background-repeat: no-repeat
        sc($font-large-x, $white)
    &:hover
      background-color: $vice-color
    .menu
      padding: 15px 0 0 200px
      ul
        display: inline-block
        position: relative
        li.menu-item
          float: left
          hh(30px)
        span
          margin: 0 10px
          sc($font-medium, $white)
      li.underline
        display: none
        lbposition(0, -5px)
        wh(0, 3px)
        background-color: $white
        &.active
          display: block
      .l_and_r
        rtposition(0, 22px)
        font-size: 0
        .btn
          box-sizing: content-box
          margin: 0 10px
          &.active
            background-color: $white
            color: $main-color
          &:hover
            background-color: #d3d4d6
            border-color: #d3d4d6
            color: $color
    .menu-min
      display: none
      rtposition(0, 15px)
      wh(25px, 30px)
  .progress-wrap
    z-index: 1000
    lbposition(0, 0)
    width: 100%
    hh(2px)
    overflow: hidden
  @media (max-width: 765px)
    .header
      .menu
        ltposition(0, 60px)
        display: block
        wh(100%, auto)
        padding: 0 0 55px
        background-color: rgba(0, 0, 0, .9)
        -webkit-border-radius: 0 0 5px 5px
        -moz-border-radius: 0 0 5px 5px
        border-radius: 0 0 5px 5px
        li.menu-item
          width: 100%
          hh(44px)
          text-align: center
        .l_and_r
          width: 100%
          top: auto
          left: 0
          right: auto
          bottom: 18px
          text-align: center
      .menu-min
        display: block
</style>
